<template>
  <div class="talent-show">
    <el-card>
      <div id="chart" style="width: 100%; height: 400px;"></div>
    </el-card>
  </div>
</template>


<script>
import * as echarts from 'echarts';
import axios from 'axios';


export default {
  name: 'recruitLouDou',
  data(){
     return{
        echartsList:[]
     }

  },
  mounted() {
    this.findList()
  },

  methods: {
        findList(){
            axios.post("/api/cand/findEchartsProcessList",{}).then(res=>{
                this.echartsList = res.data.data
                console.log("数据",this.echartsList);
                
                this.initChart();
        })
    },
    initChart() {
      const chartDom = document.getElementById('chart');
      const myChart = echarts.init(chartDom);
      const option = {
        title: {
          text: '招聘漏斗'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'horizontal',
          left: 'center'
        },
        series: [
          {
            name: '招聘流程',
            type: 'funnel',
            data : this.echartsList,
            itemStyle: {
              emphasis: {
                borderColor: '#fff',
                borderWidth: 3
              }
            }
          }
        ]
      };


      option && myChart.setOption(option);
    },


  }
};
</script>


<style scoped>
.talent-show {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.el-card {
  width: 85%;
  height: 85%;
}
</style>